@primaryColor: #2080f0;
@successColor: #18a058;
@dangerColor: #d03050;
@warningColor: #f0a020;

@borderColor: #dcdee0;
@backgroundColor: #fff;
@textColor: #323233;
@textColor5: #fff;

.BBT(@border, @background, @color) {
  border-color: @border;
  background-color: @background;
  color: @color;
}

.BBTLighten(@color, @num, @num2) {
  border-color: lighten(@color, @num);
  background-color: lighten(@color, @num2);
  color: @color;
}

.o-btn {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  padding: 0 20px;
  border-radius: 3px;
  font-size: 14px;
  transition: .2s;
  user-select: none;
  height: 34px;
  line-height: 34px;
  border: 1px solid @borderColor;

  &:hover {
    opacity: .8;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-round {
    border-radius: 18px;

    &.large {
      border-radius: 20px;
    }

    &.small {
      border-radius: 16px;
    }

    &.mini {
      border-radius: 14px;
    }
  }

  &.is-circle {
    border-radius: 50%;
    height: 36px;
    padding: 0;
    width: 36px;

    &.large {
      width: 40px;
      height: 40px;
    }

    &.small {
      width: 32px;
      height: 32px;
    }

    &.mini {
      width: 28px;
      height: 28px;
    }
  }

  &.o-btn-primary {
    .BBT(@primaryColor, @primaryColor, @textColor5);

    &.is-plain {
      .BBTLighten(@primaryColor, 30, 42);

      &:hover {
        .BBT(@primaryColor, @primaryColor, @textColor5);
      }
    }
  }

  &.o-btn-success {
    .BBT(@successColor, @successColor, @textColor5);

    &.is-plain {
      .BBTLighten(@successColor, 30, 58);

      &:hover {
        .BBT(@successColor, @successColor, @textColor5);
      }
    }
  }

  &.o-btn-warning {
    .BBT(@warningColor, @warningColor, @textColor5);

    &.is-plain {
      .BBTLighten(@warningColor, 10, 26);

      &:hover {
        .BBT(@warningColor, @warningColor, @textColor5);
      }
    }
  }

  &.o-btn-bordered {
    border: none;
  }

  &.o-btn-danger {
    .BBT(@dangerColor, @dangerColor, @textColor5);

    &.is-plain {
      .BBTLighten(@dangerColor, 30, 46);

      &:hover {
        .BBT(@dangerColor, @dangerColor, @textColor5);
      }
    }
  }

  &.o-btn-text {
    border: 0;
    padding: 0;
    height: auto;
    line-height: normal;
  }

  &.large {
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }

  &.small {
    padding: 0 5px;
    border-radius: 3px;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
  }

  &.mini {
    padding: 0 15px;
    border-radius: 4px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
  }
}